
<template>
    <div class="page">
        <!-- 轮播 -->
        <van-swipe class="swiper" :autoplay="3000" indicator-color="white">
            <van-swipe-item class="swiper-item">1</van-swipe-item>
            <van-swipe-item class="swiper-item">2</van-swipe-item>
            <van-swipe-item class="swiper-item">3</van-swipe-item>
            <van-swipe-item class="swiper-item">4</van-swipe-item>
            <van-swipe-item class="swiper-item">5</van-swipe-item>
        </van-swipe>
        <div class="product-tip">
            <!-- 抢购 -->
            <div class="qianggou">
                <div class="qianggou-left">
                    <span>限时抢购</span>
                    <span>限量500份</span>

                </div>
                <div class="qianggou-right">
                    <van-icon name="clock-o" style="margin-right:0.1rem;"/>
                    <span>距离结束只剩</span>
                    <count-down endTime="1554008967" :callback="timecallback" endText="已经结束了"></count-down>
                </div>
            </div>
            <!-- 价格 -->
            <div class="prise">
                <div class="prise-left">
                    <span>￥</span>
                    <span>800</span>
                    <span>￥1000</span>
                    <span>新人专享</span>
                </div>
                <div class="prise-right">
                    月销2000
                </div>
            </div>
            <!-- 升级会员 -->
            <div class="Upgrade">
                <div class="UpgradeContent">
                    <div class="UpgradeContent-left">赚更多</div>
                    <div class="UpgradeContent-middle">升级会员赚<span>￥5.88</span>元起</div>
                    <div class="UpgradeContent-right">立即升级></div>
                </div>
            </div>
            <!-- 商品标题 -->
            <div class="productTitle">
                <p>iqos配件烟灰缸车载烟头罐日本电子烟三代2.4plus</p>
                <p>这里是型号说明，产品概要介绍</p>
            </div>
        </div>
        <div class="null"></div>
        <div class="productChoose">
            <div class="productChoose-item" @click="openJifen">
                <div class="productChoose-item-left">优惠</div>
                <div class="productChoose-item-right">购买可获得10积分<span>积分</span></div>
            </div>
            <div class="productChoose-item" @click="openChooseGuige">
                <div class="productChoose-item-left" >规格</div>
                <div class="productChoose-item-right">请选择></div>
            </div>
            <div class="productChoose-item">
                <div class="productChoose-item-left">送至</div>
                <div class="productChoose-item-right">请选择配送区域></div>
            </div>
            <div class="serve" @click="openFuwu">
                <div class="serve-item">
                    <span></span>
                    <span>7天内发货</span>
                </div>
                <div class="serve-item">
                    <span></span>
                    <span>正品包邮</span>
                </div>
                <div class="serve-item">
                    <span></span>
                    <span>30天退换</span>
                </div>
                <div class="serve-item">
                    <span></span>
                    <span>满88免邮</span>
                </div>
            </div>
        </div>
        <div class="null"></div>
        <div class="comment">
            <div class="comment-top">
                <span>宝贝评价</span>
                <span>查看全部></span>
            </div>
            <div class="comment-tip">
                <div class="comment-tip-left">
                    <img src="@/assets/1.png" alt="">
                    <span>xxxxxxx</span>
                    <van-rate />
                </div>
                <div class="comment-tip-right">
                    2019-10-1
                </div>

            </div>
            <div class="comment-content">
                    内容内容
            </div>
            <div class="comment-img">
                <img src="@/assets/1.png" alt="">
                <img src="@/assets/1.png" alt="">
                <img src="@/assets/1.png" alt="">
            </div>
            <div class="comment-guige">
                黑色：L
            </div>
        </div>
        <div class="null"></div>
        <div class="tuijian">
            <p class="tuijian-title">为您推荐</p>
            <div class="tuijian-all">
                <a class="tuijian-item">
                    <img src="@/assets/1.png" alt="">
                    <p class="tuijian-item-title">日本电子烟iqos烟盒日 本电子烟iqos烟盒</p>
                    <div class="tuijian-item-bottom">
                        <span>￥1000</span>
                        <span>￥1500</span>

                    </div>
                </a>
                <a class="tuijian-item">
                    <img src="@/assets/1.png" alt="">
                    <p class="tuijian-item-title">日本电子烟iqos烟盒日 本电子烟iqos烟盒</p>
                    <div class="tuijian-item-bottom">
                        <span>￥1000</span>
                        <span>￥1500</span>

                    </div>
                </a>
                <a class="tuijian-item">
                    <img src="@/assets/1.png" alt="">
                    <p class="tuijian-item-title">日本电子烟iqos烟盒日 本电子烟iqos烟盒</p>
                    <div class="tuijian-item-bottom">
                        <span>￥1000</span>
                        <span>￥1500</span>

                    </div>
                </a>
            </div>
        </div>
        <!-- 选择产品的规格 -->
        <div class="pruduct-guige" v-if="chhooseguige_show">
            <div class="guige-content">
                <div class="guige-content-top">
                    <div class="guige-content-top-left">
                        <img src="@/assets/1.png" alt="">
                        <div class="guige-prise">
                            <p class="guige-prise-number">
                                <span>￥1000</span>
                                <span>￥1000</span>
                            </p>
                            <p class="kucun">库存：1000</p>
                        </div>
                    </div>
                    <van-icon name="close" @click="closeChooseGuige" />
                </div>
                <div class="pruduct-guige-color">
                    <p>颜色</p>
                    <div class="choosecolor">
                        <span class="choosecolor-active">黑色</span>
                        <span>黑色</span>
                        <span>黑色</span>
                        <span>黑色</span>
                        <span>黑色</span>
                        <span>黑色</span>
                        <span>黑色</span>
                    </div>
                </div>
                <div class="pruduct-guige-size">
                    <p>尺码</p>
                    <div class="choosesize">
                        <span class="choosesize-active">黑色</span>
                        <span>黑色</span>
                        <span>黑色</span>
                        <span>黑色</span>
                        <span>黑色</span>
                        <span>黑色</span>
                        <span>黑色</span>
                    </div>
                </div>
                <div class='product-shuliang'>
                    <span>数量</span>
                    <van-stepper v-model="value" />
                </div>
                <div class="pay-button">
                    <a>加入购物车</a>
                    <a>立即购买</a>
                </div>
            </div>
        </div>
        <!-- 积分弹窗 -->

        <div class="pruduct-youhui" v-if="jifen_show">
            <div class="youhui-content">
                <div class="youhui-content-top">
                    <div class="guige-null"></div>
                    <div class="">优惠</div>
                    <van-icon name="close"  @click="closeJifen"/>
                </div>
                <div class="youhui-content-bottom">
                    <img src="@/assets/jifen.png" alt="">
                    <p>购买可获得<span>10</span>积分</p>
                    <p>积分介绍信息，积分介绍信息</p>
                </div>
            </div>
        </div>
        <!-- 服务保障弹窗 -->
        <div class="pruduct-fuwu"  v-if="fuwubaozhang_show">
            <div class="fuwu-content">
                <div class="fuwu-content-top">
                    <div class="guige-null"></div>
                    <div class="">服务保障</div>
                </div>
                <div class="fuwu-all">
                    <div class="fuwu-item">
                        <div class="fuwu-item-top">
                            <span></span>
                            <span>7天内发货</span>
                        </div>
                        <div class="fuwu-item-bottom">积分介绍信息，积分介绍信息</div>
                    </div>
                    <div class="fuwu-item">
                        <div class="fuwu-item-top">
                            <span></span>
                            <span>正品包邮</span>
                        </div>
                        <div class="fuwu-item-bottom">积分介绍信息，积分介绍信息</div>
                    </div>
                    <div class="fuwu-item">
                        <div class="fuwu-item-top">
                            <span></span>
                            <span>30天退换</span>
                        </div>
                        <div class="fuwu-item-bottom">积分介绍信息，积分介绍信息</div>
                    </div>
                    <div class="fuwu-item">
                        <div class="fuwu-item-top">
                            <span></span>
                            <span>满88包邮</span>
                        </div>
                        <div class="fuwu-item-bottom">积分介绍信息，积分介绍信息</div>
                    </div>
                </div>
                <div class="fuwu-button" @click="closeFuwu">
                    完成
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import countDown from '@/components/daojishi/daojishi'

    export default {

        name: "ProductDetails",
        data() {
            return {
                chhooseguige_show:false,//选择规格是否显示
                jifen_show:false,//积分窗口是否显示
                fuwubaozhang_show:false,//服务保障弹窗
            }
        },
        methods: {
            // 打开规格弹窗
            openChooseGuige(){
                this.chhooseguige_show=true
            },
            // 关闭规格弹窗

            closeChooseGuige(){
                this.chhooseguige_show=false
            },
            // 打开积分弹窗

            openJifen(){
                this.jifen_show=true
            },
            // 关闭积分弹窗

            closeJifen(){
                this.jifen_show=false
            },
            // 打开积分弹窗

            openFuwu(){
                this.fuwubaozhang_show=true
            },
            // 关闭积分弹窗

            closeFuwu(){
                this.fuwubaozhang_show=false
            },
            // 倒计时结束的回调
            timecallback(){
                console.log('已结束')
            }
        },
        components:{
            countDown
        }
    };
</script>

<style scoped>

    .null{
        background: #F5F6F7;
        height: 0.2rem;
    }
    /* 轮播图 */
    .swiper{
        height: 5.6rem;
    }
    .swiper-item{
        background: green;
        color: white
    }
    .swiper-item img{
        width: 100%;
        height: 100%;
    }
    /* 价格 */
    .product-tip{
        padding: 0.5rem 0.3rem;
        padding-top:0.1rem;
    }
    .prise{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.35rem;
    }
    .prise-left span:nth-child(1){
        color: #F52E67;
        font-size: 0.3rem;
    }

    .prise-left span:nth-child(2){
        color: #F52E67;
        font-size: 0.35rem;
    }
    .prise-left span:nth-child(3){
        color: #B3B5B8;
        font-size: 0.26rem;
        text-decoration:line-through;
        margin-left: 0.2rem;
    }
    .prise-left span:nth-child(4){
        background: #F52E67;
        color: white;
        font-size: 0.25rem;
        border-radius:0.2rem;
        padding: 0.05rem 0.2rem;
        margin-left: 0.2rem;
    }
    .prise-right{
        color: #9FA0A5;
        font-size: 0.22rem;
    }
    /* 升级会员 */
    .Upgrade{
        margin-top: 0.3rem;
    }
    .UpgradeContent{
        height: 1rem;
        background: #EBC993;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.2rem;
        border-radius:0.16rem;
    }
    .UpgradeContent-left{
        color: white;
        font-size: 0.26rem;
        width:1.11rem;
        line-height:0.45rem;
        text-align: center;
        background:#F6E3BE;
        border-radius:23px;
    }
    .UpgradeContent-middle{
        color: #412A00;
        font-size: 0.28rem;
        margin-left: -1rem;
    }
    .UpgradeContent-middle span{
        color: #F52E67
    }
    .UpgradeContent-right{
        color: #412A00;
        font-size: 0.26rem;
    }
    /* 商品标题 */
    .productTitle{
        margin-top: 0.2rem;
    }
    .productTitle p:nth-child(1){
        color: #191E2A;
        font-size: 0.3rem;
    }
    .productTitle p:nth-child(2){
        color: #B3B5B8;
        font-size: 0.28rem;
        margin-top: 0.1rem;
    }
    /* 选择规格 */
    .productChoose{
        padding-left: 0.3rem;
    }
    .productChoose-item{
        display: flex;
        align-items: center;
        height: 0.9rem;
        justify-content: space-between;
        padding:0 0.2rem 0 0;
        border-bottom:0.01rem solid #e6e6e6;
    }
    .productChoose-item-left{
        font-size: 0.28rem;
        color: #191E2A;
    }
    .productChoose-item-right{
        font-size: 0.28rem;
        color: #9FA0A5;
    }
    .productChoose-item-right span{
        font-size: 0.2rem;
        color: #fff;
        background: #F52E67;
        padding: 0 0.1rem;
        margin-left: 0.2rem;
    }
    /* 服务 */
    .serve{
        display: flex;
        padding: 0.3rem 0.3rem 0.3rem 0;
        justify-content: space-between;
        font-size: 0.28rem;

    }
    .serve-item {
        display: flex;
        align-items: center;
    }
    .serve-item span:nth-child(1){
        width: 0.1rem;
        height: 0.1rem;
        background: #F52E67;
        margin-right: 0.1rem;
    }
    /* 评论 */
    .comment{
        padding: 0.3rem;

    }
    .comment-top{
        display: flex;
        justify-content: space-between;
    }
    .comment-top span:nth-child(1){
        font-size: 0.28rem;
        color: #191E2A;
    }
    .comment-top span:nth-child(2){
        font-size: 0.28rem;
        color: #9FA0A5;
    }
    .comment-tip{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.7rem;
    }
    .comment-tip-left{
        display: flex;
        align-items: center;
    }
    .comment-tip-left img{
        width: 0.56rem;
        height: 0.56rem;
        display: flex;
        align-items: center;
    }
    .comment-tip-left span:nth-child(2){
        margin-left: 0.2rem;
        margin-right: 0.2rem;

    }
    .comment-content{
        font-size: 0.28rem;
        padding: 0.2rem 0;
    }
    .comment-img img{
        width: 2.1rem;
        height: 2.1rem;
        margin-right: 0.2rem;
    }
    .comment-img img:nth-child(3n){
        margin-right: 0;
    }
    .comment-guige{
        width: 1.15rem;
        height: 0.3rem;
        line-height: 0.3rem;
        background: #EFF0F1;
        color: #CCCED0;
        text-align: center;
    }
    /* 推荐 */
    .tuijian{
        padding: 0.3rem 0 0.3rem 0.3rem;
    }
    .tuijian-title{
        font-size: 0.28rem;
    }
    .tuijian-all{
        margin-top: 0.3rem;
        display: flex;
        white-space:nowrap;
        overflow-x:auto;
    }
    .tuijian-item{
        display: block;
        white-space:normal;
        border: 1px solid #e6e6e6;
        width: 2.6rem;
        margin-right: 0.3rem;
        border-radius: 0.2rem;
    }
    .tuijian-item img{
        width: 2.6rem;
        height: 2.1rem;
        border-top-left-radius:0.2rem;
        border-top-right-radius:0.2rem;

    }
    .tuijian-item-title{
        padding: 0.1rem;
    }
    .tuijian-item-bottom{
        display: flex;
        justify-content: space-between;
        padding: 0 0.1rem 0.2rem 0.1rem;
    }
    .tuijian-item-bottom span:nth-child(1){
        font-size: 0.24rem;
        color: #F52E67;
    }
    .tuijian-item-bottom span:nth-child(2){
        font-size: 0.24rem;
        color: #B3B5B8;
        text-decoration:line-through;
    }
    /* 选择产品规格弹窗 */
    .pruduct-guige{
        position: fixed;
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.5)
    }

    .guige-content{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 9.4rem;
        background: #fff;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;

    }

    .guige-content-top{
        padding: 0.3rem;
        padding-bottom: 0;
        display: flex;
        justify-content: space-between;
    }
    .guige-content-top img{
        width: 2.28rem;
        height: 2.28rem;
    }
    .guige-content-top-left{
        display: flex;
        align-items: center;
    }
    .guige-prise{
        margin-left: 0.43rem;
    }
    .guige-prise-number span:nth-child(1){
        font-size: 0.34rem;
        color: #F52E67
    }
    .guige-prise-number span:nth-child(2){
        font-size: 0.26rem;
        color: #B3B5B8;
        text-decoration:line-through;
        margin-left: 0.2rem;
    }
    .kucun{
        font-size: 0.3rem;
        color: #B3B5B8;
    }
    /* 选择颜色 */
    .pruduct-guige-color{
        padding: 0 0.3rem;
        font-size: 0.28rem;
        margin-top: 0.3rem;
    }
    .choosecolor{
        margin-top: 0.2rem;
    }
    .choosecolor span{
        display: inline-block;
        width: 1.4rem;
        height: 0.56rem;
        line-height: 0.56rem;
        border-radius:0.1rem;
        color:white;
        background: #E3E2E2;
        font-size: 0.28rem;
        text-align: center;
        margin-bottom: 0.1rem;
    }
    .choosecolor-active{
        color: white !important;
        background: #F52E67 !important;
    }
    /* 选择尺码 */
    .pruduct-guige-size{
        padding: 0 0.3rem;
        font-size: 0.28rem;
        margin-top: 0.3rem;
    }
    .choosesize{
        margin-top: 0.2rem;
    }
    .choosesize span{
        display: inline-block;
        width: 1.4rem;
        height: 0.56rem;
        line-height: 0.56rem;
        border-radius:0.1rem;
        font-size: 0.28rem;
        text-align: center;
        margin-bottom: 0.1rem;
        border: 1px solid #e6e6e6;
        color: #C9CACC;
    }
    .choosesize-active{
        color: #F52E67 !important;
        border-color: #F52E67 !important;
    }
    .product-shuliang{
        display: flex;
        justify-content: space-between;
    }
    .product-shuliang{
        margin-top: 0.5rem;
        padding:0 0.3rem;
        font-size: 0.28rem;
   }
   /* 购买按钮 */
   .pay-button{
       position: fixed;
       display: flex;
       width: 100%;
       bottom: 0;
       height: 1rem;
   }
   .pay-button a{
       line-height: 1rem;
       text-align: center;
       font-size: 0.28rem;
   }
   .pay-button a:nth-child(1){
       flex: 1;
       background:#2D3540;
       color: white;
   }
   .pay-button a:nth-child(2){
       flex: 1;
       background:#F52E67;
       color: white;
   }
   /* 优惠弹窗 */
    .pruduct-youhui{
        position: fixed;
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.5)
    }

    .youhui-content{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 5.66rem;
        background: #fff;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;

    }
    .youhui-content-top{
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.32rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.3rem;
        border-bottom: 1px solid #e6e6e6;
    }
    .youhui-content-bottom{
        text-align: center;
    }
    .youhui-content-bottom img{
        width: 2.4rem;
        height: 2.2rem;
    }
    .youhui-content-bottom p:nth-child(2){
        font-size: 0.3rem;
    }
    .youhui-content-bottom p:nth-child(2) span{
        color: #F52E67
    }
    .youhui-content-bottom p:nth-child(3){
        font-size: 0.3rem;
        margin-top: 0.25rem;
        color: #B3B5B8
    }
    /* <!-- 服务保障弹窗 --> */
    .pruduct-fuwu{
        position: fixed;
        z-index: 99;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.5)
    }

    .fuwu-content{
        position: fixed;
        bottom: 0;
        width: 100%;
        height:8.71rem;
        background: #fff;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;

    }
    .fuwu-content-top{
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.32rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.3rem;
        border-bottom: 1px solid #e6e6e6;
    }
    .fuwu-all{
        padding: 0.3rem;
        font-size: 0.3rem;

    }
    .fuwu-item{
        margin-bottom: 0.5rem;
    }
    .fuwu-item-top{
        display: flex;
        align-items: center;
    }
    .fuwu-item-top span{
        display: inline-block;
    }
    .fuwu-item-top span:nth-child(1){
        width: 0.1rem;
        height: 0.1rem;
        background: #F52E67;
        margin-right: 0.1rem;
    }
    .fuwu-item-bottom{
        color: #B3B5B8;
        font-size: 0.28rem;
    }
    .fuwu-button{
        height: 1.8rem;
        text-align: center;
        line-height: 1.45rem;
        font-size: 0.32rem;
        color: white;
        background-image: url(../../assets/button.png) ;
        background-size: 100% 100%;
    }
    /* 抢购 */
    .qianggou{
        display: flex;
        height: 1rem;
        justify-content: space-between;
        align-items: center;
        background-image: url(../../assets/qianggou.png);
        background-size: 100% 100%;
    }
    .qianggou-left{margin-left: 0.35rem;}
    .qianggou-left span:nth-child(1){
        color: white;
        font-size: 0.3rem;
    }
    .qianggou-left span:nth-child(2){
        color: white;
        font-size: 0.28rem;
    }
    .qianggou-right{
        display: flex;
        align-items: center;
        margin-right: 0.2rem;
        color: white;
        font-size: 0.26rem;
    }
</style>

